<template>
  <div class="main_box">
    <el-row class="boxRow">
      <el-col class="boxMain" :class="isView && lineSet.sixParam == null ? 'not_config' : ''">
        <div v-if="isView && lineSet.sixParam != null">
          <!-- <div class="configured" @click="setDeploy('sixParam')">已配置</div> -->
        </div>
        <div class="deploy" v-if="!isView">
          <div class="text-white configure_title">折线图</div>
          <el-button type="primary" size="small" @click="setDeploy('sixParam', lineSet.sixParam)">配 置</el-button>
        </div>
        <div v-if="lineSet.sixParam != null" id="line-first" class="my_chart"></div>
      </el-col>
      <el-col class="boxMain" :class="isView && lineSet.sevenParam == null ? 'not_config' : ''">
        <div v-if="isView && lineSet.sevenParam != null">
          <!-- <div class="configured" @click="setDeploy('sevenParam')">已配置</div> -->
        </div>
        <div class="deploy" v-if="!isView">
          <div class="text-white configure_title">折线图</div>
          <el-button type="primary" size="small" @click="setDeploy('sevenParam', lineSet.sevenParam)">配 置</el-button>
        </div>
        <div v-if="lineSet.sevenParam != null" id="line-second" class="my_chart"></div>
      </el-col>
      <el-col class="boxMain lastLine" :class="isView && lineSet.eightParam == null ? 'not_config' : ''">
        <div v-if="isView && lineSet.eightParam != null">
          <!-- <div class="configured" @click="setDeploy('eightParam')">已配置</div> -->
        </div>
        <div class="deploy" v-if="!isView">
          <div class="text-white configure_title">折线图</div>
          <el-button type="primary" size="small" @click="setDeploy('eightParam', lineSet.eightParam)">配 置</el-button>
        </div>
        <div v-if="lineSet.eightParam != null" id="line-third" class="my_chart"></div>
      </el-col>
    </el-row>

    <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
  </div>
</template>

<script>
  import * as echarts from "echarts"
  import charts from "./chart.js"
  import deployDialog from "./dialog/deployDialog.vue"
  import { queryDeviceRealTB } from "@/api/showManage/index"

  export default {
    components: {
      deployDialog
    },
    props: {
      isView: { //展示还是配置
        type: Boolean,
        default: () => true
      },
      configured: {
        // 已配置
        type: Array,
        default: () => []
      },
      tableData: {
        // 配置弹窗表格数据
        type: Array,
        default: () => []
      },
      lineSet: {
        //获取数据的配置参数params
        type: Object,
        default: () => {
        }
      }
    },
    data() {
      return {
        showNum: 0,
        setNum: "",
        timeInterval: null
      }
    },
    created() {
      this.setTime()
    },
    beforeDestroy() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
    mounted() {
      // this.getOne()
      this.getData()
    },
    methods: {
      setTime() {
        this.timeInterval = setInterval(() => {
          this.getData()
        }, 3000)
      },
      getData() {
        Object.keys(this.lineSet).forEach((key) => {
          if (this.lineSet[key] != null) {
            this.getPar(1, key)
          }
        })
      },
      getPar(type, key, url) {
        let obj = {
          deviceCode: this.$route.query.deviceCode
        }
        obj.params = type == 1 ? this.lineSet[key] : url
        queryDeviceRealTB(obj).then(res => {
          let id = key == "sixParam" ? "line-first" : key == "sevenParam" ? "line-second" : "line-third"
          charts.lineEchart(id, res.object)
        })
      },
      setDeploy(par, data="") {
        this.setNum = par
        this.$refs.deployDialog.setPar = par
        this.$refs.deployDialog.isView = false
        this.$refs.deployDialog.tableData = this.tableData
        if(data) {
          let newList = data.split("&")
          this.$refs.deployDialog.getList2(newList)
        }
        this.$refs.deployDialog.dialogVisible = true
      },
      refresh(url) {
        // this.getPar(2, this.setNum, url)
      },
      getOne() {
        charts.lineEchart("line-first")
        charts.lineEchart("line-second")
        charts.lineEchart("line-third")
      }
    }
  }
</script>

<style lang="scss" scoped>
  .configure_title {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .main_box {
    height: 41%;
  }

  .boxRow {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 10px 0;
  }

  .boxMain {
    border-radius: 8px;
    margin-right: 20px;
    background-color: #fff;
    width: calc((100% - 40px) / 3);
    height: 100%;
    border: 1px solid #EBEEF5;
    padding: 8px 0;
    position: relative;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
  }

  .lastLine {
    margin-right: 0 !important;
  }

  .my_chart {
    // height: 260px;
    // width: 100%;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    height: 100%;
  }

  .tab {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .tab_title {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
  }

  .text-warning {
    color: #ff9933;
    text-align: center;
    margin-top: 10px;
  }

  .box_info {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12px;

    span {
      color: #9a9a9a;
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .tab_title {
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }

  .text {
    color: #666666;
  }

  .deploy {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 199;
    opacity: 0.9;
    background-color: #b2b2b2;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
  }

  .configured {
    font-family: 'SourceHan';
    text-align: right;
    margin-right: 8px;
    color: #3276ff;
    cursor: pointer;
  }

  .not_config {
    background-image: url('../../../../../../assets/img/dataDel.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
  }
</style>
